<template>
  <div class="main-app">
    <ToolsBar :has-selected-code="hasSelectedCode" @add-data="addCarInfo" />
    <div
      class="main-container"
      id="data-table-main-container"
      p-10px
      m-10px
      rounded-4
      bg-white
      relative
      overflow-hidden
      dark="bg-dark border border-solid"
    >
      <DataTable
        :data="carData"
        @save-data="saveCarInfo"
        @delete-data="deleteCarInfo"
        :columns="ColumnsData"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useCarStore } from "~/src/store";
import ToolsBar from "./components/ToolsBar.vue";
import DataTable from "@/components/common/DataTable.vue";
import { carInfo } from "@/constant";

const carStore = useCarStore();

const ColumnsData: DataTable.ColumnType[] = carInfo.map(
  (item: DataTable.ColumnType) => ({ ...item, width: 200 })
);

const hasSelectedCode = ref<boolean>(false);

// 车辆表格数据
const carData = ref<DataTable.TableData[]>(
  carStore.carInfoList.map((carInfo, index) => ({
    key: index,
    ...carInfo,
  }))
);

// 新增车辆信息
function addCarInfo(carInfo: Car.CarInfo) {
  carStore.addCarInfo(carInfo);
}

// 保存车辆信息
function saveCarInfo(carInfo: DataTable.TableData) {
  carStore.editCarInfo(Number(carInfo.key), {
    ...carInfo,
    key: undefined,
  } as any);
}

// 删除车辆信息
function deleteCarInfo(index: number) {
  carStore.deleteCarInfo(index);
}
</script>

<style scoped lang="scss">
.main-app {
  border-color: rgba(#fff, 0.09);
  overflow: auto;
}

.main-container {
  height: calc(100vh - 150px);
}
</style>
